<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <script src="../js/jquery.etree.js"></script>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>

<body>


    <div class="easyui-layout" data-options=" fit:true,border:false">

        <div data-options="region:'west',split:true" title="新闻类" style="width:200px;">
                <ul id="tt" class="easyui-tree"></ul>
        </div>
        <div id="mm" class="easyui-menu" style="width:120px;">
            <div onclick="append()" data-options="iconCls:'icon-add'">添加新闻</div>
            <div onclick="removeit()" data-options="iconCls:'icon-remove'">移除新闻</div>
            <div class="menu-sep"></div>
            <div onclick="expand()">展开</div>
            <div onclick="collapse()">折叠</div>
        </div>
        <div data-options="region:'center',title:'管理',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="tb" style="padding:2px 5px;">
                <input id="name" label="用户名称:" style="width:10%;" />

                <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">查找</a>
                <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加数据</a>
                <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
            </div>

            <div id="dlg" class="easyui-dialog" title="表单信息" data-options="iconCls:'icon-save',closed: true" style="width:400px;padding:10px">

                    <form
                    id="ff"
                    class="easyui-form"
                    method="post"
                    data-options="novalidate:true"
                  >
                    <input name="_id" style="width:100%;visibility:hidden;" />

                    <div style="margin-bottom:5px">
                      <input
                        id="title"
                        class="easyui-textbox"
                        name="title"
                        style="width:100%"
                        data-options="label:'新闻标题:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        class="easyui-textbox"
                        name="content"
                        style="width:100%"
                        data-options="label:'内容:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        id="author"
                        class="easyui-textbox"
                        name="author"
                        style="width:100%"
                        data-options="label:'作者:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        id="dd"
                        class="easyui-datetimebox"
                        name="releasetime"
                        style="width:100%"
                        data-options="label:'发布时间:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        id="dd"
                        class="easyui-datetimebox"
                        name="updatetime"
                        style="width:100%"
                        data-options="label:'修改时间:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        class="easyui-textbox"
                        name="updateby"
                        style="width:100%"
                        data-options="label:'修改人:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        class="easyui-numberbox"
                        name="hits"
                        style="width:100%"
                        data-options="label:'点击数:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        class="easyui-numberbox"
                        name="greats"
                        style="width:100%"
                        data-options="label:'点赞数:',required:true,"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                        class="easyui-textbox"
                        name="keywords"
                        style="width:100%"
                        data-options="label:'关键字:',required:true"
                      />
                    </div>
                    <div style="margin-bottom:5px">
                      <input
                       class="easyui-numberbox"
                        name="transmits"
                        style="width:100%"
                        data-options="label:'转发量:',required:true"
                      />
                    </div>
                  </form>

                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
                    </div>
            </div>


        </div>
    </div>


    <script>
        var newsId='';
      /*   $('#tt').etree({

            url:`${window.parent.globalURL}category/list/1`,
            createUrl:`${window.parent.globalURL}category`,
            updateUrl:`${window.parent.globalURL}category`,
            destroyUrl: `${window.parent.globalURL}category/list/1`,
            dndUrl: `${window.parent.globalURL}category/list/1`,
            create:function(){

            },

        }); */
         $('#tt').tree({   //拉取tree
        url:`${window.parent.globalURL}category/list/1`,
        animate:true,
        onContextMenu: function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#mm').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        },
        onClick:function(node){
            //console.log(node._id);
            newsId=node._id;
            $('#dg').datagrid({
                queryParams: {
                    newsId: node._id
                }
            });
           },

        });

        function append(){
			var t = $('#tt');
			var node = t.tree('getSelected');
			t.tree('append', {
				parent: (node?node.target:null),
				data: [{
					text: 'newitem',
				}]
			});
		}
		function removeit(){
			var node = $('#tt').tree('getSelected');
			$('#tt').tree('remove', node.target);
		}
		function collapse(){
			var node = $('#tt').tree('getSelected');
			$('#tt').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt').tree('getSelected');
			$('#tt').tree('expand',node.target);
		}

function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                // 将当前页面的表单信息进行获取，然后进行ajax请求
                var formData = $("#ff").serializeJSON();
                if(formData._id.length > 0){
                    // update
                    $.ajax({
                        url:`${window.parent.globalURL}news/${formData._id}`,
                        type:'put',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })
                }else{
                    // add
                    delete formData._id;
                    formData.newsId=newsId;
                    $.ajax({
                        url:`${window.parent.globalURL}news`,
                        type:'post',
                        data:formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })

                }


           }
            // 表单验证
        }

    });
    return false; // 阻止默认事件
}

function clearForm(){
    $('#ff').form('clear');
}

$('#dg').datagrid({
    url:`${window.parent.globalURL}news/list`,
    fit:'true',
    border:false,
    striped: true,
    pagination:true,
    toolbar:'#tb',
    columns:[[
        {field:'ck',checkbox:true},
        {field:'title',title:'新闻标题',width:'10%'},
        {field:'content',title:'内容',width:'15%'},
        {field:'author',title:'作者',width:'5%'},
        {field:'releasetime',title:'发布时间',width:'5%'},
        {field:'updatetime',title:'修改时间',width:'5%'},
        {field:'updateby',title:'修改人',width:'5%'},
        {field:'hits',title:'点击数',width:'5%'},
        {field:'greats',title:'点赞数',width:'5%'},
        {field:'keywords',title:'关键字',width:'10%'},
        {field:'transmits',title:'转发量',width:'5%'},

        {field:'_id',title:'操作', width:'10%',
            formatter: function(value,row,index){
				return `<a href="javascript:void(0)" onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${row._id}')">删除</a>`
			}
		}
    ]]
});

function deleteData(id){
    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){

            $.ajax({
                url:`${window.parent.globalURL}news/${id}`,
                type:'delete'
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });

}

function updateData(id){

    $.ajax({
        url:`${window.parent.globalURL}news/${id}`,
        type:'get'
    }).done(function(res){
        $('#ff').form('load',res);
        $('#dlg').dialog('open');
    })

}

function deleteDatas(){
  var rows = $('#dg').datagrid('getSelections');
  var ids = [];
  for(var i=0;i<rows.length;i++){
    ids.push(rows[i]._id);
  }
  $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}news/deletes`,
                type:'post',
                data:{
                    ids: ids.toString()
                }
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });
}


$("#searchData").click(function(){
    $('#dg').datagrid({
        queryParams: {
            name: $("#name").val()
        }
    });
})


$("#addData").click(function(){
    $('#dlg').dialog('open');
})

$("#removesData").click(function(){
    deleteDatas();
})





</script>
</body>
</html>